﻿<div class="bg-light lter b-b wrapper-md">
  <h1 class="m-n font-thin h3">表单向导 <kbd class="pull-right">Form Wizard</kbd></h1>
</div>
<div class="wrapper-md">
  <tabset class="tab-container" ng-init="steps={percent:0, step1:true, step2:false, step3:false}">
    <tab heading="第一步" active="steps.step1" select="steps.percent=5">
      <p class="m-b">使用 Bootstrap 的选项卡和 ngForm 构建的此表单向导.</p>
      <progressbar value="steps.percent" class="progress-xs" type="success"></progressbar>
      <h4>验证表单</h4>
      <form name="step1" class="form-validation">
        <p>电子邮箱:</p>
        <input type="email" name="email" class="form-control" ng-model="email" required ng-change="step1.email.$valid ? (steps.percent=30) : (steps.percent=20)">
        <p class="m-t">个人主页:</p>
        <input type="url" name="url" placeholder="http://" class="form-control" ng-model="website" required>
        <div class="m-t m-b">
          <button type="submit" ng-disabled="step1.$invalid" class="btn btn-default btn-rounded" ng-click="steps.step2=true">下一步</button>
        </div>
      </form>
    </tab>
    <tab heading="第二步" disabled="step1.$invalid" active="steps.step2" select="steps.percent=30">
      <form name="step2" class="form-validation">
        <p class="m-b">继续下一步</p>
        <progressbar value="steps.percent" class="progress-xs" type="success"></progressbar>
        <p>年龄:</p>
        <input type="number" name="age" class="form-control" ng-model="age" required>
        <div class="m-t m-b">
          <button type="button" class="btn btn-default btn-rounded" ng-click="steps.step1=true">上一步</button>
          <button type="submit" ng-disabled="step2.$invalid" class="btn btn-default btn-rounded" ng-click="steps.step3=true">下一步</button>
        </div>
      </form>
    </tab>
    <tab heading="完成" disabled="step2.$invalid" active="steps.step3" select="steps.percent=60">
      <p class="m-b">祝贺! 操作已全部完成.</p>
      <progressbar value="steps.percent" class="progress-xs" type="success"></progressbar>
      <p>只要点击完成即可.</p>
      <div class="m-t m-b">
        <button type="button" class="btn btn-default btn-rounded" ng-click="steps.step2=true">上一步</button>
        <button type="button" class="btn btn-default btn-rounded" ng-click="steps.percent=100">点我完成</button>
      </div>
    </tab>
  </tabset>
</div>